<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <p>测试 v-for 遍历数组</p>
        <ul>
            <li v-for="(p,index) in persons" :key="index">
                {{index}} -- {{p.name}} -- {{p.age}}
                -- <button @click="del(index)">删除</button>
                -- <button @click="upda(index,{name:'cat',age:40})">更新</button>
            </li>
        </ul>
        <p>测试 v-for 遍历对象</p>
        <ul>
            <li v-for="(val,key) in persons[1]" :key="key">
                {{val}} -- {{key}}
            </li>
        </ul>
    </div>
</body>
<script src="../../public/vue.dev.js"></script>
<script type="text/javascript">

    const vm = new Vue({
        el: '#app',
        data: {
            persons:[
                {'name':'zhangsan','age':10},
                {'name':'lisi','age':12},
                {'name':'wangwu','age':33},
            ],
        },
        methods:{
            // function(){return val}
            // 删除指定下标
            del(val){
                this.persons.splice(val,1);
            },
            // 更新指定下标 需要使用vue操作数组自带函数
            upda(val,newV){
                // this.persons[val] = newV;  xx没有调用变异方法，不会更新界面
                this.persons.splice(val,1,newV);
            }
        },
        
        /**
         * tips:
         * 遍历数组 v-for="(val,key) in array" :key = "key"
         * 遍历对象 v-for="(key,val) in obj" :key = "key"
         *
         * 在对data中数据进行增删改操作时，使用变异方法，也就是vue自带原生函数操作数据，否则不会会改变原data数据
         * */
    });
</script>
</html>
